<template>
    <view>
        <view class="container">
            <view class="swiper">
                <swiper :autoplay="true" duration="1200" :indicatorDots="true" interval="3000">
                    <swiper-item v-for="(item, index) in slide" :key="index">
                        <image class="nav-icon" mode="aspectFill" :src="item.thumb"></image>
                    </swiper-item>
                </swiper>
            </view>
            <view class="nav">
                <navigator
                    :class="'nav-item ' + ((index + 1) % 3 == 0 ? 'nav-item-no-border' : '')"
                    hoverClass="navigator-hover"
                    :url="item.url"
                    v-for="(item, index) in navs"
                    :key="index"
                >
                    <image class="nav-icon" :src="item.icon"></image>

                    <view class="nav-title">{{ item.name }}</view>
                </navigator>
            </view>
            <view class="commend">
                <block v-for="(item, index) in commend" :key="index">
                    <view class="commend-header-title">{{ item.name }}</view>

                    <view class="commend-column">
                        <navigator class="commend-item" hoverClass="navigator-hover" v-for="(subItem, index1) in item.article" :key="index1">
                            <image class="commend-thumb" :src="subItem.thumb"></image>

                            <view class="commend-title">{{ subItem.title }}</view>
                        </navigator>
                    </view>
                </block>
            </view>
        </view>

        <!-- parse <template is="footerWx" :data="...tabBar"></template> -->
        <block name="footerWx">
            <view class="we7-bottom" :style="'background-color:' + backgroundColor + ';border-color:' + borderStyle" v-if="list">
                <block v-for="(item, index) in list" :key="index">
                    <view class="we7-bottom-item" hoverClass="active" v-if="item.pageUrl == '/' + thisurl">
                        <navigator hoverClass="active" openType="redirect" :url="item.pagePath">
                            <image class="item-img" mode="widthFix" :src="item.selectedIconPath"></image>
                            <view class="item-text" :style="'color: ' + selectedColor + ';'">{{ item.text }}</view>
                        </navigator>
                    </view>

                    <view class="we7-bottom-item" hoverClass="active" v-else>
                        <navigator hoverClass="active" openType="redirect" :url="item.pagePath">
                            <image class="item-img" mode="widthFix" :src="item.iconPath"></image>
                            <view class="item-text" :style="'color: ' + color">{{ item.text }}</view>
                        </navigator>
                    </view>
                </block>
            </view>
            <view class="we7-bottom-placeholder"></view>
        </block>
    </view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {
            navs: [],
            slide: [],
            commend: [],
            userInfo: {},

            subItem: {
                thumb: '',
                title: ''
            },

            backgroundColor: '',
            borderStyle: '',
            list: [],
            thisurl: '',
            selectedColor: '',
            color: ''
        };
    },
    onLoad: function () {
        var that = this;
        app.globalData.util.footer(that);
        app.globalData.util.request({
            url: 'wxapp/home/nav',
            cachetime: '30',
            success: function (e) {
                e.data.message.errno ||
                    (console.log(e.data.message.message),
                    that.setData({
                        navs: e.data.message.message
                    }));
            }
        });
        app.globalData.util.request({
            url: 'wxapp/home/slide',
            cachetime: '30',
            success: function (e) {
                e.data.message.errno ||
                    that.setData({
                        slide: e.data.message.message
                    });
            }
        });
        app.globalData.util.request({
            url: 'wxapp/home/commend',
            cachetime: '30',
            success: function (e) {
                e.data.message.errno ||
                    that.setData({
                        commend: e.data.message.message
                    });
            }
        });
    },
    methods: {}
};
</script>
<style>
@import './index.css';
</style>
